import { createGeoPoints, getGeoPointData, getPointBCR } from '../CMap/mapUtils.js';
// import { get } from 'lodash-es';

export default class BMapMarkerLayer {
  constructor(map, options) {
    if (!map) {
      throw new Error('props map is required !');
    }
    this.map = map;
    this.points = [];
    this.options = Object.assign({}, options);
    this.view = new mapvgl.View({
      map: this.map,
    });
    const onClick = (e) => {
      // 点击事件
      // console.log(e);
      if (e.dataItem) {
        // 可通过dataItem下面的children属性拿到被聚合的所有点
        const data = getGeoPointData(e.dataItem);
        // console.log(data);
        if (data) {
          if (typeof data.onClick === 'function') {
            data.onClick(data);
          } else if (typeof this.onClick === 'function') {
            this.onClick(data);
          }
        }
      }
    };
    const { width, height, offset } = getPointBCR({}, this.options);
    this.layer = new mapvgl.IconLayer({
      width: width,
      height: height,
      offset: offset,
      icon: 'images/marker.png',
      enablePicked: true, // 是否可以拾取
      selectedIndex: -1, // 选中项
      selectedColor: '#ff0000', // 选中项颜色
      autoSelect: false, // 根据鼠标位置来自动设置选中项
      onClick: onClick,
    });
    this.labelLayer = new mapvgl.LabelLayer({
      textAlign: 'center',
      textColor: '#fc0',
      borderColor: 'rgba(0,0,0,0)',
      backgroundColor: '#666',
      offset: [0, -1 * (height - 8)],
      padding: [6, 4],
      borderRadius: 4,
      fontSize: 12,
      lineHeight: 1,
      collides: false, // 是否开启碰撞检测, 数量较多时建议打开
      autoSelect: false,
      enablePicked: true,
      onClick: onClick,
    });
    // this.pointLayer = new mapvgl.PointLayer({
    //   color: 'rgb(200,50,50)',
    //   shape: 'circle', // 默认为圆形，可传square改为正方形
    //   blend: 'lighter',
    //   size: 5,
    //   data: [],
    // });
    this.view.addLayer(this.layer);
    this.view.addLayer(this.labelLayer);
    // this.view.addLayer(this.pointLayer);
    // console.log(this.layer);
    this.setVisiblePredicate();
  }
  onClick(data) {
    console.log(data);
  }
  setVisiblePredicate(predicate) {
    this.isVisible = typeof predicate === 'function' ? predicate : (data) => !!data;
  }
  getLayerVisible() {
    return this.view._visible;
  }
  setData(list) {
    this.points = createGeoPoints(list, this.options);
    this.filter();
  }
  getData(predicate) {
    if (typeof predicate !== 'function') {
      predicate = this.isVisible;
    }
    if (this.getLayerVisible() !== true) {
      return [];
    }
    return this.points.reduce((res, item) => {
      const data = getGeoPointData(item);
      return predicate(data) ? res.concat([data]) : res;
    }, []);
  }
  getPoints(predicate) {
    if (typeof predicate !== 'function') {
      predicate = this.isVisible;
    }
    if (this.getLayerVisible() !== true) {
      return [];
    }
    return this.points.reduce((res, item) => {
      const data = getGeoPointData(item);
      return predicate(data) ? res.concat([item]) : res;
    }, []);
  }
  showLabel() {
    this.view.showLayer(this.labelLayer);
  }
  hideLabel() {
    this.view.hideLayer(this.labelLayer);
  }
  filter(predicate) {
    if (predicate !== undefined) {
      this.setVisiblePredicate(predicate);
    }
    const data = this.getPoints(predicate);
    this.layer.clear();
    this.layer.setData(data);
    // this.pointLayer.clear();
    // this.pointLayer.setData(data);
    this.labelLayer.clear();
    this.labelLayer.setData(data);
  }
  toggle(visible) {
    if (this.getLayerVisible() !== visible) {
      this.view[visible === true ? 'show' : 'hide']();
      this.filter();
    }
  }
  destroy() {
    this.layer.clear();
    // this.pointLayer.clear();
    this.labelLayer.clear();
    this.view.destroy();
  }
}
